<template>
  <div>
    <el-row>
      <el-col :span="12">
        <h5>递归路由嵌套</h5>
        <el-menu
          class="sidebar-el-menu"
          background-color="#324157"
          text-color="#bfcbd9"
          active-text-color="#20a0ff"
          router
        >
          <template v-for="item in leftNav">
            <template v-if="item.son">
              <el-submenu
                :index="item.url"
                :key="item.url"
              >
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span slot="title">{{ item.permissions_name }}</span>
                </template>
                <!-- 改造： 递归路由的实现使用了组件，子组件通过递归自身来生成无限级菜单。
                其中，父子组件之间的通信使用了 props 属性进行传递。子组件通过判断当前节点是否有子节点来决定是否继续递归渲染-->
                <recursive-menu :menu-data="item.son"></recursive-menu>

              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item
                :index="item.url"
                :key="item.url"
              >
                <i :class="item.icon"></i>
                <span slot="title">{{ item.permissions_name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
import RecursiveMenu from "./RecursiveMenu.vue";
export default {
  name: 'ElementTestSlider',
  components: {
    RecursiveMenu,
  },
  data() {
    return {
      leftNav: [],
    };
  },
  created() {
    axios.get('./static/nav.json')
      .then((response) => {
        this.leftNav = response.data.data
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .finally(function () {
        // always executed
      });
  },
};
</script>

<style lang="scss" scoped>
</style>